<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    body{
            background: black;
	    }

		.box{

			width: 630px;
			height: 400px;
			margin: 0 auto;
			margin-top: 200px;
			padding: 20px;
			border: 1px solid white;
		}
		img{
			text-align: center;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
    <div class="box">
    				<img src="3.webp" alt="">
			    	<img src="3.webp" alt="">
			    	<img src="3.webp" alt="">
			    	<img src="3.webp" alt="">
			    	<img src="3.webp" alt="">
			    	<img src="3.webp" alt="">
    </div>
	<script src="../jquery-3.2.1.js"></script>
	<script>
	$(function(){
      $('img').animate({
         "opacity":.3
      });
        $('img').mouseover(
      function(){$(this).stop().animate({"opacity":1});},
      )
    })
    $('img').mouseout(
      function(){$(this).stop().animate({"opacity":.3});
      
    })
	</script>
</body>
</html>